<template>
    <div class="auto-datepicker">
        <DatePicker ref="datepicker" :value="date" separator=" ~ " v-bind="getAttrs" @on-change="handleChange"></DatePicker>
    </div>
</template>

<script>
import moment from "moment";
export default {
    props: ["modelValue"],
    data () {
        return {
            date: null,
            propsOnChange: null,
        }
    },
    watch: {
        "modelValue": {
            handler (value) {
                console.log("propsValue", value);
                if (!value) {
                    this.date = null;
                    // 调用datepicker本身自带的clear方法清空数据
                    return this.$refs.datepicker.handleClear();
                }
                // 字符串 即 daterange
                if (typeof value == "string") {
                    this.date = value.split(" ~ ").map(item => {
                        return new Date(item);
                    });
                }
                else {
                    this.date = value;
                }
            }
        },
    },
    computed: {
        getAttrs () {
            let { options, type, placement, style, ...attr } = this.$attrs;
            let commonShortcuts = [
                {
                    text: "最近7天",
                    value () {
                        const end = moment();
                        const start = moment().subtract(7, "days");
                        return [start.toDate(), end.toDate()];
                    }
                },
                {
                    text: "最近14天",
                    value () {
                        const end = moment();
                        const start = moment().subtract(14, "days");
                        return [start.toDate(), end.toDate()];
                    }
                },
                {
                    text: "最近30天",
                    value () {
                        const end = moment();
                        const start = moment().subtract(30, "days");
                        return [start.toDate(), end.toDate()];
                    }
                },
                {
                    text: "本月",
                    value () {
                        const end = moment().endOf("month");
                        const start = moment().startOf("month");
                        return [start.toDate(), end.toDate()];

                    }
                },
                {
                    text: "上月",
                    value () {
                        const end = moment().endOf("month").subtract(1, "month");
                        const start = moment(end).startOf("month");
                        return [start.toDate(), end.toDate()];
                    }
                },
                {
                    text: "近半年",
                    value () {
                        const end = moment();
                        const start = moment().subtract(6, "month");
                        return [start.toDate(), end.toDate()];
                    }
                }
            ];
            if (options) {
                commonShortcuts = options.shortcuts;
            }
            if (type == "daterange") {
                if (!style.width) {
                    style.width = "180px";
                }
            }
            let attrs = {
                type,
                style,
                ...attr,
                placement: placement || "bottom-end",
                options: {
                    shortcuts: commonShortcuts
                },
            };
            // console.log('attrs', attrs);
            return attrs;
        }
    },
    methods: {
        handleChange (value) {
            if (!value || !value[0]) return this.$emit("update:modelValue", null);
            let format = "";
            switch (this.$attrs.format) {
                case "yyyy-MM-dd":
                    format = "YYYY-MM-DD";
                break;
                case "yyyy-MM-dd HH:mm:ss":
                    format = "YYYY-MM-DD HH:mm:ss";
                break;
                default:
                    format = this.$attrs.format;
            }
            if (Array.isArray(value)) {
                value = value.map(item => {
                    return moment(item).format(format);
                });
            }
            else {
                value = moment(value).format(format);
            }
            console.log(value.join(" ~ "));
            this.$emit("update:modelValue", value.join(" ~ "));
            this.$emit("on-change", value, format);
        }
    }
}
</script>

<style>

</style>